<template>
  <div>
    <!-- 日期选择器和搜索按钮 -->
    <div class="top">
      <el-row>
        <el-col :span="21">
          <el-date-picker
            style="width: 100%"
            v-model="dates"
            type="daterange"
            range-separator="To"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handlerShow">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- echarts -->
    <div class="echarts">
      <el-row>
        <el-col :span="12">
          <div style="width: 100%; height: 600px" ref="main1"></div>
        </el-col>
        <el-col :span="12">
          <div style="width: 100%; height: 600px" ref="main2"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { GetOrderStatistics } from '@/api/orderStatistics'
const dates = ref(['2023-05-01', '2023-05-31'])

const handlerShow = async () => {
  if (dates.value && dates.value.length == 2) {
    const { data } = await GetOrderStatistics(dates.value[0], dates.value[1])
    initBar(main1.value, data.dateList, data.totalNum, 'line', '每日销售量')
    initBar(main2.value, data.dateList, data.amountList, 'bar', '每日销售金额')
  }
}

onMounted(() => {
  //初始值
  handlerShow()
})

const main2 = ref({})
const main1 = ref({})

//条形图
const initBar = (container, xData, value, type, subtext) => {
  var myChart = echarts.init(container)
  myChart.setOption({
    title: {
      text: '订单统计图',
      subtext,
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: value,
        type,
      },
    ],
  })
}
</script>

<style>
.echarts {
  margin-top: 100px;
}
</style>
